<script setup>
import {computed, onMounted, ref, watch} from "vue";
import {useStore} from "vuex";
import {ElMessage} from "element-plus";
import axios from "axios";

let props = defineProps({
   type: true,//true表示新增，false表示修改
})

let form = computed(() => {//新增
   return store.state.departmentForm
})
// if (props.type) {
//    form.value.did = ""
//    form.value.dname =""
// }
let store = useStore()
let show = computed(() => {
   return store.state.AEIsShow
})

function deleteForm() {
   store.commit("setShow", false)
   console.log(store.state.AEIsShow)
}


function editClick() {
   store.commit("setShow", false)
   console.log(form.value)
   if (props.type) {//新增
      axios.post("/department/add", form.value).then(res => {
         console.log(res)
         if (res.data.code === 200) {
            ElMessage("添加成功")
         } else {
            ElMessage("添加失败")
         }
      }).catch(err => {
         console.log(err)
      })
   } else {//修改

      axios.put("/department/update", form.value).then(res => {
         console.log(res)
         if (res.data.code === 200) {
            ElMessage("修改成功")
         }
      }).catch(err => {
         console.log(err)
      })
   }
}



</script>

<template>
   <div class="home" v-if="show">
      <div class="content">
         <div class="form">
            <div class="row">
               <div style="margin-top: 30px">
                  <span>部门名称</span>
                  <input style="height: 30px" type="text" class="input" v-model="form.dname">
               </div>
            </div>
         </div>
         <div class="btn">
            <button
                style="height:25px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 100px;text-align:  center;cursor:pointer;border-radius: 10px;color: white;border: none;float: none"
                @click="deleteForm()">取消
            </button>

            <button
                style="height:25px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 100px;text-align:  center;cursor:pointer;border-radius: 10px;color: white;border: none;margin-left: 30px;float: none"
                @click="editClick()">确定
            </button>
         </div>
      </div>
   </div>
</template>

<style scoped>
.home {
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.2);
   position: absolute;
   top: 0;
   left: 0;
   z-index: 999;
}

.content {
   padding-top: 30px;
   padding-bottom: 70px;
   width: 500px;
   background-color: white;
   position: relative;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   border-radius: 10px;
}

.form {
   margin-top: 40px;
   margin-left: 20px;
   margin-right: 20px;
   height: 100px;

}

.row {
   margin-bottom: 20px;
}

.input {
   width: 350px;
   margin-left: 20px;
}

.btn {
   position: absolute;
   bottom: 20px;
   right: 20px;
   margin-top: 40px;
   margin-left: 20px;
   margin-right: 20px;
}

</style>